<template>
  <ul class="top-nav">
    <router-link
      tag="li"
      exact
      :to="item.path"
      v-for="(item, index) in this.list"
      :key="index"
    >
      <div class="img">
        <img
          :src="navIndex == index ? item.url2 : item.url1"
          alt=""
          @click="geiUrl(index, item.url1, item.url2)"
        />
      </div>
      <div :class="navIndex == index ? '' : 'active'">
        <span>{{ item.title }}</span>
      </div>
    </router-link>
  </ul>
</template>

<script>
const shouye = require("../assets/images/shouye.png");
const shouye1 = require("../assets/images/shouye1.png");
const xuanzhi = require("../assets/images/xuanzhi.png");
const xuanzhi1 = require("../assets/images/xuanzhi1.png");
const shangcheng = require("../assets/images/shangcheng.png");
const shangcheng1 = require("../assets/images/shangcheng1.png");
const rencai = require("../assets/images/rencai.png");
const rencai1 = require("../assets/images/rencai1.png");
const wode = require("../assets/images/wode.png");
const wode1 = require("../assets/images/wode1.png");
export default {
  data() {
    return {
      navIndex: 0,
      list: [
        {
          title: "首页",
          path: "/",
          url1: shouye,
          url2: shouye1,
        },
        {
          title: "选址",
          path: "/sitetesting",
          url1: xuanzhi,
          url2: xuanzhi1,
        },
        {
          title: "商城",
          path: "/shopping",
          url1: shangcheng,
          url2: shangcheng1,
        },
        {
          title: "人才",
          path: "/talents",
          url1: rencai,
          url2: rencai1,
        },
        {
          title: "我的",
          path: "/usmine",
          url1: wode,
          url2: wode1,
        },
      ],
    };
  },
  watch: {
    navIndex() {
      // console.log(this.navIndex);
    },
    $route: "getPath",
  },
  mounted() {
    const getIndex = localStorage.getItem("navIndex");
    this.navIndex = parseInt(getIndex);
    this.geiUrl(getIndex);
  },
  methods: {
    getPath() {
      let path=this.$route.path;
      let arrList =this.list;
      for(let i =0;i<arrList.length;i++){
        if(path===arrList[i].path){
          this.navIndex=i;
          localStorage.setItem("navIndex", i);
        }
      }
    },
    geiUrl(index, url1, url2) {
      localStorage.setItem("navIndex", index);
      this.navIndex = index;
    },
  },
};
</script>

<style scoped lang="less">
.router-link-active {
  color: #2c2c2c;
}

.top-nav {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 333;
  display: flex;
  background: #fff;
  padding: 12px 0;

  li {
    width: 20%;
    font-size: 10px;
    text-align: center;
    font-weight: 600;
    .img {
      width: 24px;
      height: 24px;
      margin: 0 auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.active {
  color: #dbdbdb;
}
</style>